<template>
  <div class="box">
    <div class="login">
      <h1>登录</h1>
      {{user}}
      <el-input placeholder="请输入账户" v-model="user.username" clearable></el-input>
      <el-input placeholder="请输入密码" v-model="user.password" clearable></el-input>
      <el-button type="primary" round @click="login">登录</el-button>
    </div>
  </div>
</template>
<script>
import { userLogin } from "../../request/api";
import {mapGetters,mapActions} from "vuex"
export default {
  data() {
    return {
      user: {
        username: "",
        password: ""
      }
    };
  },
  props: [],
  component: {
    ...mapGetters({
      user:"user"
    })
  },
  methods: {
    ...mapActions({
      changeUser:"changeUser"
    }),
    login() {
      userLogin(this.user).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.msg,
            type: "success"
          });
          this.changeUser(res.data.list)
          this.$router.push("/")
        }
      });
    }
  },
  mounted() {}
};
</script>
<style lang="less" scoped>
.box {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: cadetblue;
  .login {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 30px;
    border-radius: 20px;
    h1 {
      margin: 20px 0;
      text-align: center;
    }
    .el-input {
      margin: 20px 0;
    }
    .el-button {
      margin: 20px 0;
      width: 100%;
    }
  }
}
</style>